<template>
  <view class="page">
    <comHead :datas="datasObj">
      <template #headerContent>
        <view class="search mt-30" style="height: 132rpx;">
          <view class="inputbox">
            <up-input ref="searchInput" @blur="hanleBlur" @focus="hanleFocus" @clear="searchDel" placeholder="请输入关键词搜索"
              @enter="Search" placeholderStyle="font-size: 28rpx;color: #D1D1D1;" border="none" clearable
              v-model="searchValue" prefixIcon="search"
              prefixIconStyle="font-size: 22px;color: #333333;font-weight: bold;margin-left:15rpx"
              :focus="isFocus"></up-input>

          </view>
          <view class="button" @click="Search"> 搜索 </view>
        </view>
      </template>
    </comHead>

    <view class="content_box">
      <view v-if="isSearch">
        <view class="history auto mt-30 flex-bwt" v-if="isHistoryShow && searchHistoryData.length > 0">
          <text class="ft1">历史搜索</text>
          <view class="ft flex" @click="clear">
            <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon13.png"></image>
            <view class="clear ml-8">清除</view>
          </view>
        </view>
        <view v-if="isHistoryShow" class="tagBox flex history mt-12">
          <view class="tag mr-20 mt-20 flex-center ft" v-for="(item, index) in searchHistoryData.slice(0, 10)"
            :key="index" @click="hanleSelectItem(item.name)">
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view class="history auto mt-30 flex-bwt">
          <text class="ft1">热门搜索</text>
        </view>
        <view class="tagBox flex history mt-12">
          <view class="tag mr-20 mt-20 flex-center ft" v-for="(item, index) in searchData.hot_search_list" :key="index"
            @click="hanleSelectItem(item.name)">
            <image v-if="index === 0" class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon14.png">
            </image>
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view class="sign auto" v-if="searchInfo.type == 'project'">
          <view class="top">
            <view class="left">
              <view class="up">#热销项目#</view>
              <view class="down ft-eng">Popular Projects </view>
            </view>
          </view>
          <view class="pd-20 mt-10">
            <comProjectList_one v-if="searchData?.hot_product_list?.length > 0" :dataList="searchData.hot_product_list">
            </comProjectList_one>
          </view>
        </view>
        <view class="sign auto videoSign" v-else>
          <view class="top">
            <view class="left">
              <view class="ft1 ml-20">热搜视频</view>
              <!-- <view class="down ft-eng">Best-selling video </view> -->
            </view>
          </view>
          <view class="pd-30">
            <view class="vedio flex-bwt-wrap">
              <view class="vedioItem" v-for="item in searchData?.hot_video_list" :key="item.id"
                @click="goPage(`/pages/category/category?id=${item.id}&isReback=${true}`)">
                <image style="border-radius: 40rpx" class="wh-100" :src="item.cover" mode="aspectFill">
                </image>
                <image class="play wh-56" src="https://cdn.oss.bon-top.cn/static_bc/images/play.png"></image>
                <view class="card flex pd-12">
                  <view class="card_bg"></view>
                  <view class="avtor">
                    <image class="wh-56 bd-r50c" :src="item.sale_info.avatar" mode="aspectFill"></image>
                    <image class="huiyuan" v-if="item.sale_info.is_official"
                      src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png">
                    </image>
                  </view>
                  <view class="desc ml-12 te-wid">
                    <view class="ft1 te-1 c-ff">{{ item.product_info.name }}</view>
                    <view class="ft3"><span v-for="tag in item.product_info.tags.slice(0, 2)" :key="tag.id">{{ ' #' +
                      tag.name
                        }}</span>
                    </view>
                  </view>
                </view>
              </view>

            </view>
          </view>


        </view>
      </view>

    </view>

    <up-modal width="420rpx" @confirm="confirm" @cancel="cancel" contentTextAlign="center" :show="showModel"
      :showCancelButton="true" :content="content">
    </up-modal>
  </view>

</template>
<script setup>
import { ref, reactive, nextTick } from "vue";
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
import { onLoad, onHide, onUnload, onShow } from "@dcloudio/uni-app";
import comProjectList_one from "@/components/comProjectList_one.vue";
import comHead from '@/components/comHead.vue';

let datasObj = reactive({
  title: '搜索',
  img: '',
  color: '#FFFFFF',
  direction: '',
  scrollTop: 0,
  noBack: false,
  height: 240
})

let app = getApp()
onUnload(() => {
  if (app.globalData.isTeacherAdd) app.globalData.isTeacherAdd = false

})
const showModel = ref(false);
const searchValue = ref('');
const isHistoryShow = ref(true);
const content = ref('确定要清除历史搜索吗')
const searchData = ref({})
const searchDataVideo = ref([{ videos: [] }])
const getSearchData = () => {
  utils.request(api.index, {
  }, 'get').then((res) => {
    searchData.value = res.data.info
    searchDataVideo.value[0].videos = res.data.info.hot_video_list
  })
}

// 筛选点击确认时触发
const searchHistoryData = ref([])
const getSearchHisData = () => {
  utils.request(api.history
    , {}, 'get').then((res) => {
      searchHistoryData.value = res.data.info.list

    })
}
// 清除历史记录
const getSearchDel = () => {
  utils.request(api.clearHistory
    , {

    }, 'get').then((res) => {
      console.log('清除成功');
      if (res.code === 200) {
        isHistoryShow.value = false;
        showModel.value = false;
        utils.toast('清除成功')
      }


    })

}


const currentTab = ref(0);
const hanleSelectItem = (item) => {
  searchValue.value = item;
  uni.navigateTo({ url: `/subpackage/search/searchView?title=${datasObj.title}&type=${searchInfo.value.type}&keywords=${searchValue.value}` })

}
const searchDel = () => {
  isSearch.value = true;
  isShowButton.value = true;
}
const isSearch = ref(true);
const hanleBlur = () => {
};

const hanleFocus = () => {
};


const confirm = () => {
  getSearchDel()

}
// 跳转
const goPage = (url) => {
  uni.navigateTo({
    url: url
  })
}
const clear = () => {
  showModel.value = true;

}
const cancel = () => {
  showModel.value = false;
}
// 点击搜索按钮
const Search = () => {
  if (!searchValue.value.length > 0) return
  uni.navigateTo({
    url: `/subpackage/search/searchView?title=${datasObj.title}&type=${searchInfo.value.type}&keywords=${searchValue.value}`,
    animationType: 'none',     // 指定跳转无动画
    animationDuration: 0,
  })

};
const isFocus = ref(false)
const searchInput = ref(null)
// onShow(() => {
//   nextTick(() => {
//     setTimeout(() => {
//       console.log('searchInput', searchInput.value)
//       // isFocus.value = true
//       searchInput.value?.focus()
//     }, 1200)
//   })

// })
const searchInfo = ref({})
onLoad((options) => {
  // 判断当前为普通搜索 / 视频搜索
  searchInfo.value = {
    type: 'project',
    title: '搜索'
  }
  datasObj.title = '搜索'
  if (options.type == 'video') {
    searchInfo.value = {
      type: options.type,
      title: '视频搜索'
    }
    datasObj.title = '视频搜索'
    currentTab.value = 2
  }
  // 关键字搜索 更多服务中选项跳转过来 直接搜索关键字
  if (options.keywords) {
    searchValue.value = options.keywords
    Search()
  }
  getSearchData()
  getSearchHisData()
})

</script>
<style lang="scss" scoped>
.search {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding-left: 30rpx;
  padding-right: 30rpx;
  justify-content: center;

  .inputbox {
    // width: 574rpx;
    width: 100%;
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #333333;
  }

  .button {
    margin-left: 20rpx;
    width: 96rpx;
    height: 80rpx;
    background: #333333;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
  }
}

.vedio {
  .vedioItem {
    width: 334rpx;
    height: 614rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    //border: 1rpx solid red;
    margin-bottom: 16rpx;
    position: relative;



    .play {
      position: absolute;
      top: 297rpx;
      left: 147rpx;
      z-index: 3;
    }

    .card {
      width: 314rpx;
      height: 82rpx;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      position: absolute;
      bottom: 10rpx;
      left: 10rpx;
      z-index: 10;
      overflow: hidden;

      .card_bg {
        width: 314rpx;
        height: 82rpx;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        // background: #fff;
        background-color: rgba(255, 255, 255, 0.6);
        // opacity: 0.7;
        // filter: blur(30rpx);
        backdrop-filter: blur(30rpx);

      }

      .avtor {
        width: 56rpx;
        height: 56rpx;
      }

      .huiyuan {
        width: 22rpx;
        height: 20rpx;
        position: absolute;
        bottom: 10rpx;
        left: 44rpx;
        z-index: 12;
      }
    }
  }
}


.confirm {
  width: 750rpx;
  height: 118rpx;
  background: #f8f8f8;
  box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

  .submit {
    width: 482rpx;
    height: 78rpx;
    background: #333333;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .reset {
    width: 168rpx;
    height: 78rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}


.scrollPop {
  height: 920rpx;
}

.popup {
  //height: 920rpx;
  // border: 2rpx solid red;
  box-sizing: border-box;
  padding: 40rpx;

  .service {
    height: 58rpx;
    background: #f1f1f1;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    margin-left: 20rpx;
    margin-top: 20rpx;
  }

  .active {
    background: #333333;
    color: #dbf046;
  }
}


.history {
  margin-left: 24rpx;
  margin-right: 24rpx;
}

.history:hover {
  color: red;
}

.tagBox {
  flex-wrap: wrap;
  justify-content: flex-start;

  .tag {
    min-width: 120rpx;
    padding: 0 10rpx;
    height: 58rpx;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}

.sign {
  margin-top: 60rpx;
  width: 690rpx;
  min-height: 252rpx;
  background: linear-gradient(180deg, #fbffdf 0%, #ffffff 100%);
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  padding-top: 24rpx;

  .top {

    width: 100%;
    display: flex;
    justify-content: space-between;

    .left {
      position: relative;
      flex: 1;
      height: 44rpx;

      .up {
        width: 100%;
        height: 44rpx;
        font-weight: 800;
        font-size: 32rpx;
        color: #333333;
        position: absolute;
        top: 0;
        left: 20rpx;
        z-index: 9;
      }

      .down {
        width: 100%;
        position: absolute;
        top: 10rpx;
        left: 20rpx;
        font-family: 'DIN COROS';
        font-weight: 900;
        font-size: 44rpx;
        line-height: 44rpx;
        color: #dbf046;
        z-index: 2;
      }
    }

    .right {
      width: 176rpx;
      height: 54rpx;
      background: #333333;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #dbf046;
      text-align: center;
      line-height: 54rpx;
      margin-right: 20rpx;
    }

    .more {
      width: 122rpx;
      margin-right: 20rpx;
      height: 54rpx;

      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 2rpx solid #333333;

      .text {
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        margin-right: 8rpx;
      }

      .icon {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}

.videoSign {
  background: #fff;
  padding: 0;
  width: 100%;
}

.project {
  margin: auto;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  width: 650rpx;
  height: 408rpx;
  background: #ffffff;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  border: 2rpx solid #f1f1f1;

  .left {
    width: 222rpx;
    height: 274rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .img {
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
  }

  .right {
    flex: 1;
    height: 274rpx;

    .top {
      display: flex;
      flex-wrap: wrap;

      .tip {
        // width: 88rpx;
        height: 36rpx;
        box-sizing: border-box;
        // padding-left: 8rpx;
        // padding-right: 8rpx;
        background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
    }

    .domn {
      .price {
        //width: 148rpx;
        height: 92rpx;
        background: linear-gradient(90deg,
            #fff5f3 0%,
            rgba(255, 245, 243, 0) 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }

      .price2 {
        //  width: 148rpx;
        height: 92rpx;
        background: #fff;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }
  }

  .foot {
    width: 610rpx;
    height: 74rpx;
    background: linear-gradient(92deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
  }
}

.tabBox {
  .tab {
    width: 122rpx;
    height: 72rpx;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .active {
    background: #dbf046;
  }
}

.jiantou {
  width: 34rpx;
  height: 20rpx;
}
</style>
